Question

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.

对于我在网络前端世界中新手的愚蠢问题感到抱歉（

UPD：正如下面的评论所示，我做了以下几点：

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.

首先我得到了这个：

手动修复js文件后，我得到了这个：

Answer 1

尝试这个， https://github.com/rajkeshwar/angular-material-io 克隆后，repo执行npm安装，

npm install

运行应用程序

npm run publish-dev

如何在本地运行“material.angular.io”文档网站？

1 个答案: