Question

我知道还有其他线索提出同样的问题 - 但是他们已经关闭了，他们接受的答案无法解决这个问题。

总体建议是：＆＃34;请在主模块中导入RouterModule。＆＃34; 好吧，我做到了！我实际上完成了与github存储库中建议的方式相同的一切，但它根本不起作用。

有什么建议我做错了吗？

app.module.ts

@NgModule({
  imports: [
    HttpModule,
    BrowserModule,
    RouterModule.forRoot([
      { path: 'list', component: ListComponent },
      { path: '**', redirectTo: 'list', pathMatch: 'full' }
    ]),
    StoreModule.forRoot(AppReducer, {
      initialState: {
        screens: [],
        logo: { binaryimage: ''},
      }
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 25
    }),
    EffectsModule.forRoot([CommonEffects]),
  ],
  declarations: [
    AppComponent,
    ClockComponent,
    LogoComponent,
    SiteListComponent,
    TermsComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

terms.component.ts

@Component({
  selector: 'terms',
  templateUrl: './terms.component.html',
  styles: ['./terms.component.less']
})
export class TermsComponent implements OnInit {
  public name: string;
  public terms: Observable<Term[]>;

  constructor(
    private route: ActivatedRoute,
    private store: Store<App>
  ) {
    this.terms = store.select('terms');
  }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.store.dispatch(new TermActions.FetchTermList(params.get('name')));
    })
  }
}

的package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi",
  "scripts": {
    "precompile": "webpack",
    "build": "webpack",
    "start": "webpack-dev-server --hot --inline --port 8237",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^4.2.6",
    "@angular/compiler": "^4.2.6",
    "@angular/core": "^4.2.6",
    "@angular/forms": "^4.2.6",
    "@angular/http": "^4.2.6",
    "@angular/platform-browser": "^4.2.6",
    "@angular/platform-browser-dynamic": "^4.2.6",
    "@angular/router": "^4.2.6",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "@ngtools/webpack": "^1.8.3",
    "angular-in-memory-web-api": "^0.2.4",
    "awesome-typescript-loader": "^3.4.0",
    "core-js": "^2.4.1",
    "es5-shim": "^4.5.9",
    "es6-promise": "^4.1.1",
    "es6-shim": "^0.35.3",
    "less": "^2.7.3",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.3",
    "webpack": "^3.8.1",
    "webpack-env": "^0.8.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "angular2-template-loader": "^0.6.2",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "css-loader": "^0.28.7",
    "dateformat": "^3.0.2",
    "file-loader": "^0.9.0",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less-loader": "^4.0.5",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "postcss-loader": "^2.0.8",
    "protractor": "~4.0.14",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "style-loader": "^0.19.0",
    "to-string-loader": "^1.1.5",
    "tslint": "^3.15.1",
    "typescript": "^2.6.1",
    "uglify": "^0.1.5",
    "uglifyjs-webpack-plugin": "^1.1.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4",
    "webpack-merge": "^4.1.1"
  },
  "repository": {}
}

Answer 1

我终于找到了解决方案 - 但我一开始并不理解为什么这是一个问题！

在众多组件中的一个组件中导入路由器如下：

import { RouterModule, Routes } from '@angular/router';

然而，由于我不理解的原因，它必须像这样导入：

init(frame:)

为什么这是一个问题？它在Windows机器上（与案例无关的文件结构）并且没有编译时或运行时错误（除了说明没有提供者之外，即使在我看来回顾性地查看问题时这完全是误导性的））？

错误：未捕获（在承诺中）：错误：没有ActivatedRoute的提供者

1 个答案: