在角度項目上使用npm，但在添加角度分量時不顯示任何內容

Question

我使用的是在線發現的角度登錄示例，我們使用npm start運行。 我的問題是，當我生成一個組件並將其添加到app.modules.js文件中時，該應用程序僅顯示帶有加載內容的白頁，而在左上方則不顯示任何內容。 這可能是因為我正在使用npm嗎？ 當我將其發布在stackblitz上並添加了側邊欄組件時，它可以工作，但是如果我通過ng生成一個componenet進行組件測試，則將其添加到app.modules.js文件中時，它會顯示白屏，但是一旦移除，它就可以工作了很好。 下面提供了stackbliz和原始github鏈接

stackblitz： https ://stackblitz.com/edit/angular-ydiywh ? file = src%2Fapp%2Fapp.module.ts

github： http : //jasonwatmore.com/post/2018/06/14/nodejs-mongodb-simple-api-for-authentication-registration-and-user-management

當我運行ng serve --open時出現以下錯誤

安裝模塊后出現錯誤

ENOENT: no such file or directory, stat '/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs//src/tsconfig.app.json'
Error: ENOENT: no such file or directory, stat '/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/src/tsconfig.app.json'
    at Object.statSync (fs.js:815:3)
    at AngularCompilerPlugin._setupOptions (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:96:16)
    at new AngularCompilerPlugin (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:61:14)
    at _createAotPlugin (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:41:12)
    at Object.getNonAotConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:47:19)
    at BrowserBuilder.buildWebpackConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/browser/index.js:82:37)
    at DevServerBuilder.buildWebpackConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:111:46)
    at MergeMapSubscriber.check_port_1.checkPort.pipe.operators_1.concatMap [as project] (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:38:40)
    at MergeMapSubscriber._tryNext (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
    at MergeMapSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/mergeMap.js:55:18)
    at MergeMapSubscriber.Subscriber.next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/Subscriber.js:64:18)
    at TapSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/tap.js:62:26)
    at TapSubscriber.Subscriber.next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocsnode_modules/rxjs/internal/Subscriber.js:64:18)
    at MergeMapSubscriber.notifyNext (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocsnode_modules/rxjs/internal/operators/mergeMap.js:84:26)
    at InnerSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/InnerSubscriber.js:25:21)
    at InnerSubscriber.Subscriber.next (/Users/xxx/Library/Mobile/node_modules/rxjs/internal/Subscriber.js:64:18)

.angular.cli文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "new-cli": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets"
            ],
            "styles": [],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "new-cli:build"
          },
          "configurations": {}
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "new-cli:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [],
            "exclude": []
          }
        }
      }
    },
    "new-cli-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application"
    }
  },
  "defaultProject": "new-cli"
}

添加組件並運行npm start時chrome inspect錯誤

Uncaught Error: Unexpected module 'SidebarModule' declared by the 
 module 'AppModule'. Please add a @Pipe/@Directive/@Component 
 annotation. at syntaxError 
 (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:1270) 
 at eval 
 (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:10888) 
 at Array.forEach (<anonymous>) at 
 CompileMetadataResolver.getNgModuleMetadata 
 (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:10870) 
 at JitCompiler._loadModules 
 (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24112) 
 at JitCompiler._compileModuleAndComponents 
 (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24093) 
 at JitCompiler.compileModuleAsync 
 (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24053) 
 at CompilerImpl.compileModuleAsync 
 (webpack:///./node_modules/@angular/platform-browser- 
 dynamic/fesm5/platform-browser-dynamic.js?:158) at 
 PlatformRef.bootstrapModule 
 (webpack:///./node_modules/@angular/core/fesm5/core.js?:4649) at eval 
 (webpack:///./src/main.ts?:6)

Answer 1

安裝Angular CLI：

npm install @angular/cli

然后從應用程序目錄運行它。 它應該打開瀏覽器到localhost：4200

ng serve --open

Answer 2

npm install --save-dev @angular-devkit/build-angular

這應該可以解決您的開發套件錯誤，這是角度6中引入的新依賴關系，必須保存為開發依賴關系

Answer 3

因此，以下是為您的“本地”堆棧閃電重現而工作的步驟：

1-使用ng new myApp生成項目
2-通過導出按鈕下載stackblitz項目，然后將文件解壓縮到壓縮文件夾中。
3-在提取的文件夾中，轉到src文件夾，然后在其中單擊第二個src文件夾。
4-復制app和main.ts文件，並將它們粘貼到第一個src文件夾中。
5-打開第二個src文件夾中的typings.d文件，然后在其中復制該行。 並將此行粘貼到第一個src文件夾中的typings.d文件中。
6-刪除第二個src文件夾。
7-用解壓縮后的文件夾中的一個替換項目根目錄中的src文件夾。
8-在您的項目根目錄中運行以下命令： npm install --save ng-sidebar
9-運行npm start

現在，您可以創建所需的組件數量，這些組件仍然可以使用。

Answer 4

因此，我去了您引用的站點並下載了github項目。

我按照頁面上的說明進行操作，並且能夠正常運行。

我試圖通過“ ng”添加組件，但無法。 我不斷收到各種有關angular.json無法定位的錯誤，依此類推。 我不確定要如何將組件放入其中，但是似乎與問題有關。 cli無法開箱即用地運行此項目，它似乎需要使用npm。

在瀏覽了一些資源之后，似乎這是Webpack上的Angular，因此CLI不適用於您。 它也不允許您創建組件。