- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
material.angular.io 建立在 Angular Material 之上,我想在本地运行它,以便从这个很好的例子中学习 Material2 和 Angular 的最佳编码实践。
我已经克隆了 material2(((5.2.4))
标签)并构建了它,demo-app
运行成功。然后我在material2文件夹旁边克隆了material.angular.io(5.x
标签),运行fetch-local
,它也执行成功。但是当我最终尝试通过 npm start
启动该网站时或 npm start-jit
它无法启动。
你能指出我正确的方向吗?或者只是建议尝试一些东西。
这是 npm start-jti
的输出:
$ npm run start-jit
> material-angular-io@0.0.0 start-jit C:\dev\material.angular.io
> npm run build-themes && ng serve --sourcemaps=false
> material-angular-io@0.0.0 build-themes C:\dev\material.angular.io
> bash ./tools/build-themes.sh
Building custom theme scss files.
Finished building CSS.
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-03-28T15:47:15.637Z
Hash: 981dff57ffb17189d8f3
Time: 6447ms
chunk {assets/deeppurple-amber} assets/deeppurple-amber.bundle.js (assets/deeppurple-amber) 58.8 kB [initial] [rendered]
......
......
......
ERROR in node_modules/@angular/material-examples/typings/bottom-sheet-overview/bottom-sheet-overview-example.d.ts(1,10): error TS2305: Module '"C:/dev/material.angular.io/node_modules/@angular/material/material"' has no exported member 'MatBottomSheet'.
node_modules/@angular/material-examples/typings/bottom-sheet-overview/bottom-sheet-overview-example.d.ts(1,26): error TS2305: Module '"C:/dev/material.angular.io/node_modules/@angular/material/material"' has no exported member 'MatBottomSheetRef'.
node_modules/@angular/material-examples/typings/tree-flat-overview/tree-flat-overview-example.d.ts(1,33): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/tree-flat-overview/tree-flat-overview-example.d.ts(2,57): error TS2307: Cannot find module '@angular/material/tree'.
node_modules/@angular/material-examples/typings/tree-nested-overview/tree-nested-overview-example.d.ts(1,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/tree-nested-overview/tree-nested-overview-example.d.ts(2,41): error TS2307: Cannot find module '@angular/material/tree'.
webpack: Failed to compile.
git clone https://github.com/rajkeshwar/angular-material-io.git
cd angular-material-io
npm install
npm run publish-dev
ng serve
$ npm run publish-dev
> material-angular-io@0.0.0 publish-dev C:\dev\angular-material-io
> npm run build-themes && ng build --aot --prod && firebase use material2-docs-dev && firebase deploy
> material-angular-io@0.0.0 build-themes C:\dev\angular-material-io
> bash ./tools/build-themes.sh
Building custom theme scss files.
Finished building CSS.
Date: 2018-03-29T12:49:13.869Z
Hash: 0557f246139982a073d2
Time: 12488ms
chunk {0} styles.deb4461a77b62b0380bc.bundle.css (styles) 51.2 kB {8} [initial] [rendered]
chunk {1} main.c0c64134601656542e39.bundle.js (main) 749 bytes {7} [initial] [rendered]
chunk {2} assets/purple-green.5bcf2ee0f84bf44f9a9c.bundle.css (assets/purple-green) 34.1 kB {8} [initial] [rendered]
chunk {3} assets/pink-bluegrey.84058c604dfbf8dbb4bf.bundle.css (assets/pink-bluegrey) 33.9 kB {8} [initial] [rendered]
chunk {4} assets/indigo-pink.cf3c36ee2fdf435a5903.bundle.css (assets/indigo-pink) 32.9 kB {8} [initial] [rendered]
chunk {5} assets/deeppurple-amber.a7ed98191c18ba9d8a69.bundle.css (assets/deeppurple-amber) 33.1 kB {8} [initial] [rendered]
chunk {6} sw-register.fd5c6f76090d5004fb49.bundle.js (sw-register) 241 bytes {8} [initial] [rendered]
chunk {7} vendor.f82630c7892ae46cb7d8.bundle.js (vendor) 308 kB [initial] [rendered]
chunk {8} inline.245068beaff9bc3b497a.bundle.js (inline) 1.55 kB [entry] [rendered]
ERROR in Metadata version mismatch for module C:/dev/angular-material-io/node_modules/@angular/material-examples/typings/index.d.ts, found version 4, expected 3
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app-module.ngfactory' in 'C:\dev\angular-material-io\src'
resolve './$$_gendir/app/app-module.ngfactory' in 'C:\dev\angular-material-io\src'
using description file: C:\dev\angular-material-io\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\package.json (relative path: ./src)
using description file: C:\dev\angular-material-io\package.json (relative path: ./src/$$_gendir/app/app-module.ngfactory)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory.js doesn't exist
as directory
C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory doesn't exist
[C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory]
[C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory.ts]
[C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory.js]
[C:\dev\angular-material-io\src\$$_gendir\app\app-module.ngfactory]
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! material-angular-io@0.0.0 publish-dev: `npm run build-themes && ng build --aot --prod && firebase use material2-docs-dev && firebase deploy`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the material-angular-io@0.0.0 publish-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\<username>\AppData\Roaming\npm-cache\_logs\2018-03-29T12_49_13_937Z-debug.log
$ ng serve
Your global Angular CLI version (1.6.1) is greater than your local
version (1.3.2). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Date: 2018-03-29T12:50:43.856Z
Hash: 5b1608723dbeec693a24
Time: 18238ms
chunk {assets/deeppurple-amber} assets/deeppurple-amber.bundle.js, assets/deeppurple-amber.bundle.js.map (assets/deeppurple-amber) 55.5 kB {inline} [initial] [rendered]
chunk {assets/indigo-pink} assets/indigo-pink.bundle.js, assets/indigo-pink.bundle.js.map (assets/indigo-pink) 55.3 kB {inline} [initial] [rendered]
chunk {assets/pink-bluegrey} assets/pink-bluegrey.bundle.js, assets/pink-bluegrey.bundle.js.map (assets/pink-bluegrey) 56.9 kB {inline} [initial] [rendered]
chunk {assets/purple-green} assets/purple-green.bundle.js, assets/purple-green.bundle.js.map (assets/purple-green) 57.2 kB {inline} [initial] [rendered]
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 204 kB {vendor} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 82.1 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.99 MB [initial] [rendered]
WARNING in ./node_modules/@angular/material-examples/esm5/material-examples.es5.js
52:24-40 "export 'MatDividerModule' was not found in '@angular/material'
at HarmonyImportSpecifierDependency._getErrors (C:\dev\angular-material-io\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:65:15)
at HarmonyImportSpecifierDependency.getWarnings (C:\dev\angular-material-io\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:39:15)
at Compilation.reportDependencyErrorsAndWarnings (C:\dev\angular-material-io\node_modules\webpack\lib\Compilation.js:677:24)
at Compilation.finish (C:\dev\angular-material-io\node_modules\webpack\lib\Compilation.js:535:9)
at applyPluginsParallel.err (C:\dev\angular-material-io\node_modules\webpack\lib\Compiler.js:512:17)
at C:\dev\angular-material-io\node_modules\tapable\lib\Tapable.js:289:11
at _addModuleChain (C:\dev\angular-material-io\node_modules\webpack\lib\Compilation.js:481:11)
at processModuleDependencies.err (C:\dev\angular-material-io\node_modules\webpack\lib\Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
.................
.................
.................
ERROR in ./node_modules/@angular/material-examples/esm5/material-examples.es5.js
Module not found: Error: Can't resolve '@angular/material-moment-adapter' in 'C:\dev\angular-material-io\node_modules\@angular\material-examples\esm5'
resolve '@angular/material-moment-adapter' in 'C:\dev\angular-material-io\node_modules\@angular\material-examples\esm5'
Parsed request is a module
using description file: C:\dev\angular-material-io\node_modules\@angular\material-examples\package.json (relative path: ./esm5)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\node_modules\@angular\material-examples\package.json (relative path: ./esm5)
resolve as module
C:\dev\angular-material-io\node_modules\@angular\material-examples\esm5\node_modules doesn't exist or is not a directory
C:\dev\angular-material-io\node_modules\@angular\material-examples\node_modules doesn't exist or is not a directory
C:\dev\angular-material-io\node_modules\@angular\node_modules doesn't exist or is not a directory
C:\dev\angular-material-io\node_modules\node_modules doesn't exist or is not a directory
C:\dev\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\dev\angular-material-io\node_modules
using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules)
using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules/@angular/material-moment-adapter)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.js doesn't exist
as directory
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter doesn't exist
looking for modules in C:\dev\angular-material-io\node_modules
using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules)
using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules/@angular/material-moment-adapter)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.js doesn't exist
as directory
C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter doesn't exist
looking for modules in C:\dev\angular-material-io\src
using description file: C:\dev\angular-material-io\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\package.json (relative path: ./src)
using description file: C:\dev\angular-material-io\package.json (relative path: ./src/@angular/material-moment-adapter)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\@angular\material-moment-adapter doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\@angular\material-moment-adapter.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\@angular\material-moment-adapter.js doesn't exist
as directory
C:\dev\angular-material-io\src\@angular\material-moment-adapter doesn't exist
looking for modules in C:\dev\angular-material-io\src
using description file: C:\dev\angular-material-io\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\package.json (relative path: ./src)
using description file: C:\dev\angular-material-io\package.json (relative path: ./src/@angular/material-moment-adapter)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\@angular\material-moment-adapter doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\@angular\material-moment-adapter.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\dev\angular-material-io\src\@angular\material-moment-adapter.js doesn't exist
as directory
C:\dev\angular-material-io\src\@angular\material-moment-adapter doesn't exist
[C:\dev\angular-material-io\node_modules\@angular\material-examples\esm5\node_modules]
[C:\dev\angular-material-io\node_modules\@angular\material-examples\node_modules]
[C:\dev\angular-material-io\node_modules\@angular\node_modules]
[C:\dev\angular-material-io\node_modules\node_modules]
[C:\dev\node_modules]
[C:\node_modules]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.ts]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.js]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.ts]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter.js]
[C:\dev\angular-material-io\node_modules\@angular\material-moment-adapter]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter.ts]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter.js]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter.ts]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter.js]
[C:\dev\angular-material-io\src\@angular\material-moment-adapter]
@ ./node_modules/@angular/material-examples/esm5/material-examples.es5.js 19:0-94
@ ./src/app/app-module.ts
@ ./src/app/index.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./node_modules/@angular/material-examples/esm5/material-examples.es5.js
Module not found: Error: Can't resolve '@angular/cdk/tree' in 'C:\dev\angular-material-io\node_modules\@angular\material-examples\esm5'
resolve '@angular/cdk/tree' in 'C:\dev\angular-material-io\node_modules\@angular\material-examples\esm5'
Parsed request is a module
using description file: C:\dev\angular-material-io\node_modules\@angular\material-examples\package.json (relative path: ./esm5)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\node_modules\@angular\material-examples\package.json (relative path: ./esm5)
resolve as module
C:\dev\angular-material-io\node_modules\@angular\material-examples\esm5\node_modules doesn't exist or is not a directory
C:\dev\angular-material-io\node_modules\@angular\material-examples\node_modules doesn't exist or is not a directory
C:\dev\angular-material-io\node_modules\@angular\node_modules doesn't exist or is not a directory
C:\dev\angular-material-io\node_modules\node_modules doesn't exist or is not a directory
C:\dev\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\dev\angular-material-io\node_modules
using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\dev\angular-material-io\package.json (relative path: ./node_modules)
using description file: C:\dev\angular-material-io\node_modules\@angular\cdk\package.json (relative path: ./tree)
no extension
Field 'browser' doesn't contain a valid alias configuration
........
........
........
[C:\dev\angular-material-io\src\@angular\cdk\text-field]
[C:\dev\angular-material-io\src\@angular\cdk\text-field.ts]
[C:\dev\angular-material-io\src\@angular\cdk\text-field.js]
[C:\dev\angular-material-io\src\@angular\cdk\text-field]
[C:\dev\angular-material-io\src\@angular\cdk\text-field]
[C:\dev\angular-material-io\src\@angular\cdk\text-field.ts]
[C:\dev\angular-material-io\src\@angular\cdk\text-field.js]
[C:\dev\angular-material-io\src\@angular\cdk\text-field]
@ ./node_modules/@angular/material-examples/esm5/material-examples.es5.js 29:0-58
@ ./src/app/app-module.ts
@ ./src/app/index.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.
最佳答案
试试这个,
https://github.com/rajkeshwar/angular-material-io
克隆 repo 后执行 npm install,
安装
运行应用程序
npm 运行发布开发
关于angular - 如何在本地运行 "material.angular.io"文档网站?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49539166/
我正在尝试在项目中学习和添加 Angular 国际化。我只能理解 Angular 文档 (https://angular.io/guide/i18n-overview) 的编译时翻译。 我需要这样的东
在我的 Angular 应用程序中,基于登录用户,我想通过显示/隐藏不同的菜单项或允许/禁止某些路由来授予或限制功能。 目前成功登录后,我的 .NET Core API 会返回一个 JWT token
我是 Angular 的新手,目前我已经看过 angular.io 网站提供的一些示例。但是在component decorator在文档中的解释,它指出 Angular components are
这里是service employee-service.service.ts的代码 import { Injectable } from '@angular/core'; import { HttpC
我目前正在使用@angular/http URLSearchParams 类来检索 URL 参数。在 Angular 5 中,注意到这已被弃用,但我没有看到以我当前使用的方式替换 URLSearchP
我目前正在使用@angular/http URLSearchParams 类来检索 URL 参数。在 Angular 5 中,注意到这已被弃用,但我没有看到以我当前使用的方式替换 URLSearchP
如何正确安装 PUG/JADE 到 Angular 2 或更高版本 这样在工作和 AOT 和 JiT 的同时 工作单元和集成测试 并且在创建每个新组件时不会受到太多影响 最佳答案 我看到了很多解决方案
我的 Angular 12 应用程序中有一些通用组件,我计划将其创建为一个 Angular 库,以便其他应用程序也可以使用它。我们有一些应用程序在较低版本的 angular(例如 angular 8/
tl;dr; ng build 删除了包含我编译的自定义库的/dist 文件夹。这会使我项目代码中对该库的所有引用无效,从而导致 ng build 最终失败。我做错了什么? 我关注了documenta
我正在将一些“遗留”(非 typescript )js 库导入到我的 Angular SPA 中。 通常我只是从 cdn 添加一个负载到 index.html 就像: 在 Angular 分量中我只
我有这个 angular 应用程序,它基本上使用了库的概念。 我有 2 个名为 的库Lib1 和 lib2 根据他们所服务的微服务分组。 现在我将这些库导入主应用程序,即 应用1 事情一直到现在。 现
我在我的项目中启用了 angular Universal。我现在想完全删除它。我试图删除以下文件 /server.ts /webpack.server.config.js /src/tsconfig.
我已经有一个 AuthService 在登录时对用户进行身份验证,并且 AuthGuard 在未登录的情况下阻止访问。 某些页面我通过 UserProfile/Role 限制访问,但现在我需要阻止页面
我正在尝试使用 angular、TypeORM、SQLite 和其他组件作为 webpack 构建 Electron 应用程序。 我从在 GitHub 上找到的示例开始我的开发:https://git
我在从 Angular 8 更新到 9 并运行时遇到以下错误 ng 更新@angular/material: Package "@angular/flex-layout" has an incompa
我正在尝试使用 Angular 9,我想创建一个项目,然后创建一个库项目并开始向其中添加我想稍后在 GitHub 上发布的通用模块,并在我的本地使用这些库项目。 相关依赖如下: Angular CLI
我正在尝试使用 Angular 9,我想创建一个项目,然后创建一个库项目并开始向其中添加我想稍后在 GitHub 上发布的通用模块,并在我的本地使用这些库项目。 相关依赖如下: Angular CLI
我正在我的 h1 元素“之前”创建一个小的程式化三 Angular 形图案,但我无法正确地圆 Angular 。右上角没问题,但其他两个有剪裁问题。 这是输出以及形状的放大图像: 使用的代码如下: h
我有一个 Angular 元素,带有自定义标记名 - fancy-button。如何将 fancy-button 嵌入 Angular 应用程序? 我已经尝试了以下方法,但都没有用 - 在 index
我已将我的项目从 angular 5.2.9 升级到 angular 6.0.0-rc.5。 除了包路径中的几个快速 RxJS 修复外,一切看起来都不错。(此链接非常有用:Want to upgrad
我是一名优秀的程序员,十分优秀!