Question

我回顾了这方面的相关答案，发现它们非常有助于确定引导rc5应用程序的设置。但是，在按如下方式设置文件后，我仍然收到错误：

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//import { FormsModule } from '@angular/forms'
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent }  from './app.component';
import { routes } from './app.routes';
import { Router } from '@angular/router';
import { Calendar, DataTable, Column, InputMask } from 'primeng/primeng';

import { FooModule }  from './+foo/foo.module';
import { BarModule }  from './+bar/bar.module';
import { BooModule }  from './+boo/boo.module';
@NgModule({
  imports: [BrowserModule,
            HttpModule,
            RouterModule,
            FooModule,
            BarModule,
            BooModule
  ], 
  declarations: [AppComponent,Calendar, DataTable, Column, ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>',
    }],
  bootstrap: [AppComponent]

})

export class AppModule { }

我的组件和模块如下所示：

import { NgModule }                     from '@angular/core';
import { CommonModule, NgControl }                  from '@angular/common';
//import { FormsModule }                    from '@angular/forms';

import { SomeDirective } from '../../SomeDirective.directive';
import { SomePipe } from '../../SomePipe.pipe';
import { SomeService } from './SomeService.service';

import { ContextMenu, Menu } from 'primeng/primeng';

@NgModule({
  imports: [//modules

    ],
  declarations: [//Directives, components and pipes
      SomeDirective, SomePipe
  ],
  providers: [//services
      NgControl, SomeService
  ]  
})

export class FooModule {}

和

import {RouterModule, Router} from '@angular/router'
import { HttpModule } from '@angular/http';
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FORM_DIRECTIVES, NgControl } from '@angular/common';
import { MenuItem} from 'primeng/primeng';
import { SomeService } from './SomeService.service';
import { someInterface } from './someInterfaces';


@Component({ 
  moduleId: module.id,
  selector: '...', 
  templateUrl: '....html',
  styleUrls: ['....component.css'],
})


export class PatientSearchComponent implements OnInit {
   stateService: SomeService;
   obj: any[] = [];   

  constructor(private aService: SomeService, private router: Router,   aService: SomeService) { 
...  }

  someFunction() {
     ...
     });
 }

我在git上有一些答案，特别是https://github.com/angular/angular/issues/10805和https://github.com/angular/angular/issues/10617。我根据#brandonroberts的评论将我的依赖项放在声明，导入等中。

（我不确定的一部分，也许这就是问题所在（虽然我去了两种方式，但我得到了一个错误......），是共享组件在哪里进行的？使用它们的模块，还是app.module的模块？还是应用于app.module的声明？）

我收到以下错误：（，

localhost/:142 Error: TypeError: Cannot read property 'type' of null(…)

这似乎与app.module.ts有关，但它是什么？

谢谢！

EDIT 的index.html

<body>

  <sd-app>Loading...</sd-app>

  <script>
  // function.name (all IE)
  // Remove once https://github.com/angular/angular/issues/6501 is fixed.
  /*! @source http://stackoverflow.com/questions/6903762/function-name-not-supported-in-ie*/
  if (!Object.hasOwnProperty('name')) {
    Object.defineProperty(Function.prototype, 'name', {
      get: function() {
        var matches = this.toString().match(/^\s*function\s*((?![0-9])[a-zA-Z0-9_$]*)\s*\(/);
        var name = matches && matches.length > 1 ? matches[1] : "";
        // For better performance only parse once, and then cache the
        // result through a new accessor for repeated access.
        Object.defineProperty(this, 'name', {value: name});
        return name;
      }
    });
  }
  </script>

  <script>
  // Fixes undefined module function in SystemJS bundle
  function module() {}
  </script>

  <!-- shims:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script>
    System.config(<%=
      JSON.stringify(SYSTEM_CONFIG, null, 2)
    %>)
  </script>
  <% } %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->

  <!--<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- libs:js -->
  <!-- endinject -->

  <!-- inject:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script>
  System.import('<%= BOOTSTRAP_MODULE %>')
    .catch(function (e) {
      console.error(e,
        'Report this error');
    });
  </script>
  <% } %>
</body>

添加以下文件： main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

和+ Foo / index.ts

export * from './foo.component';
export * from './foo.routes';

Answer 1

导致错误的原因是我通过导入部分而不是声明导入模块。必须删除所有依赖项并逐个添加它们以跟踪导致错误的项目。

从rc4升级到rc5：设置依赖关系

1 个答案: