在角度项目上使用npm，但在添加角度分量时不显示任何内容

Question

I am using a angular login example found online that we use npm start to run. My problem is when i generate a component and add it to the app.modules.js file, the app doesn't display anything just a white page with a loading... on the top left. can this be because i am using npm? when i posted it on stackblitz and added the sidebar component it worked but locally if i add a componenet by ng generate component test and as soon as i add it to the app.modules.js file it shows the white screen but once removed it works perfectly fine. the stackbliz and origional github link is provided below

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

when i run ng serve --open i get the following error

error after installing module

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 file

{
  "$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"
}

error in chrome inspect when adding component and running npm start

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

Install the Angular CLI:

npm install @angular/cli

Then run this from the app directory. It should open a browser to localhost:4200

ng serve --open

Answer 2

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

这应该可以解决您的开发套件错误，这是角度6中引入的新依赖关系，必须保存为开发依赖关系

Answer 3

So here are the steps to reproduce for your 'local' stackblitz to work:

1 - generate your project with ng new myApp
2 - download the stackblitz project via the export button, then extract the files inside of the compressed folder.
3 - in the extracted folder, go to the src folder, then inside of it click on the second src folder.
4 - copy the app and the main.ts file and paste them to the first src folder.
5 - open the typings.d file in the second src folder and copy the line inside. and paste this line in the typings.d file in the first src folder.
6 - delete the second src folder.
7 - replace the src folder in your project root with the one from the extracted folder.
8 - run this command in your project root: npm install --save ng-sidebar
9 - run npm start

You can now create how many components you want this will still works.

Answer 4

So I went to the site you cited and downloaded the github project.

I followed the instructions on the page and was able to run it with no issue.

I tried to add a component via "ng" and was unable to. I kept getting a variety of errors related to angular.json not being able to be located and so on. I'm not sure what you did to get the component in there, but it seems like that is related to the problem. The cli cannot run this project out of the box it seems to require the use of npm.

After looking through some of the source it seems that this is Angular on Webpack, so the CLI won't work for you. It won't allow you to create components either.