web-dev-qa-db-ja.com

TypeScriptとMavenを使用してAngular2アプリケーションを構成する方法は？

私はAngular2の初心者です。私のプロジェクトの技術スタックは、TypeScriptとspringをバックエンドとするAngular2です。フロントエンドのコンパイルに指示されたとおりにノードサーバーを使用したくありませんが、代わりにTomcatとMavenを使用する必要があります。少し質問があります。

  1. ブラウザは.jsファイルのみを理解するため、ノードサーバーは.tsファイルごとに.jsと.js.mapを生成すると思います。私の理解は正しいですか？ MavenとTomcatを使用してこのタスクを実行するにはどうすればよいですか？
  2. Mavenを使用してアプリケーションをゼロから構築したいと思います。フロントエンドのタスクマネージャーとしてbowerを好むでしょう。

「bower、またはファイルの縮小、アプリケーションスキャフォールドの作成」、「Maven for backend task management」などのフロントエンドタスク管理用のその他のツールを使用して、Angular2 + Springアプリケーションを作成するためのステップバイステップガイドを教えてもらえますか？私はどんな提案も受け付けています。

mavenangulartypescriptbower
46
Gendaful

Angular 2 + Spring BootアプリケーションでmavenでTypeScript .tsファイルを使用しています。 npm installを実行し、依存関係にnpm run tscを実行します。exec-maven-pluginで.tsファイルを.jsに変換します。

以下は、pom.xmlのプラグイン部分です。私のアプリケーションでは、pacakge.json、tsconfig.json、typings.jsonはすべてsrc/main/resourcesパスの下にあるため、npmタスクをパスの下で実行します

pom.xml

<parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
     <version>1.3.5.RELEASE</version>
</parent>

<packaging>war</packaging>


<build>
    <plugins>
        <plugin>
            <groupId>org.Apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <executions>
                <execution>
                    <id>exec-npm-install</id>
                    <phase>generate-sources</phase>
                    <configuration>
                        <workingDirectory>${project.basedir}/src/main/resources</workingDirectory>
                        <executable>npm</executable>
                        <arguments>
                            <argument>install</argument>
                        </arguments>
                    </configuration>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                </execution>
                <execution>
                    <id>exec-npm-run-tsc</id>
                    <phase>generate-sources</phase>
                    <configuration>
                        <workingDirectory>${project.basedir}/src/main/resources</workingDirectory>
                        <executable>npm</executable>
                        <arguments>
                            <argument>run</argument>
                            <argument>tsc</argument>
                        </arguments>
                    </configuration>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

私のAngular2 + Spring Bootアプリケーションのフォルダ構造は次のようなものです

src/main/resources
                  /app          - .ts and converted .js
                  /css
                  /images
                  /js           - systemjs.config.js is also placed here
                  /node_modules - generated by npm install and will include in war
                  /typings
                  application.properties
                  package.json
                  tsconfig.json
                  typings.json

src/main/webapp
               /WEB-INF
                       /jsp     - all .jsp files

.jspファイルのヘッドセクションに、systemjs.config.jsを含めます

<script type="text/javascript" src="webjars/zone.js/0.6.12/dist/zone.js"></script>
<script type="text/javascript" src="webjars/reflect-metadata/0.1.3/Reflect.js"></script>
<script type="text/javascript" src="webjars/systemjs/0.19.27/dist/system.js"></script>
<script type="text/javascript" src="js/systemjs.config.js"></script>

また、ここにマッピングパスへのWebMvcConfigurerAdapterコードがあります

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.my.controller")
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        if (!registry.hasMappingForPattern("/webjars/**")) {
            registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
        }
        if (!registry.hasMappingForPattern("/images/**")) {
            registry.addResourceHandler("/images/**").addResourceLocations("classpath:/images/");
        }
        if (!registry.hasMappingForPattern("/css/**")) {
            registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/");
        }
        if (!registry.hasMappingForPattern("/js/**")) {
            registry.addResourceHandler("/js/**").addResourceLocations("classpath:/js/");
        }
        if (!registry.hasMappingForPattern("/app/**")) {
            registry.addResourceHandler("/app/**").addResourceLocations("classpath:/app/");
        }
        if (!registry.hasMappingForPattern("/node_modules/**")) {
            registry.addResourceHandler("/node_modules/**").addResourceLocations("classpath:/node_modules/");
        }
    }

    @Bean
    public InternalResourceViewResolver internalViewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/jsp/");
        viewResolver.setSuffix(".jsp");
        viewResolver.setOrder(1);
        return viewResolver;
    }
}

言及したいことの1つは、osがWindowsまたはMacの場合、Eclipseでexec-maven-pluginを実行するハックがあることです。 Linux（Ubuntu）はまったく問題がないようです。 WindowsまたはMacでEclipseからビルドを実行すると、問題は、ターミナルまたはコマンドウィンドウでmavenビルドが完全に正常であっても、npmコマンドを理解せず、そのようなファイルを見つけようとすることです。

そのような問題を解決するために、いくつかの調整を行いました。 Macの場合、nodeおよびnpmのシンボリックリンクを/ usr/binパスの下に作成します。ただし、/ usr/binの変更は許可されていないため、リカバリディスクによる再起動後に完了しました

lrwxr-xr-x     1 root   wheel        17 May 22 03:01 node -> ../local/bin/node
lrwxr-xr-x     1 root   wheel        44 May 22 02:50 npm -> ../local/lib/node_modules/npm/bin/npm-cli.js

Windowsの場合、node.batおよびnpm.batファイルを以下のようなシステムパスの下に作成しました。これを行った後、MavenはWindows 10のEclipseおよびコマンドウィンドウから完全に正常にビルドされます。

npm.bat

@echo off
set arg1=%1
set arg2=%2
set arg3=%3
set arg4=%4
C:\Progra~1\nodejs\npm.cmd %arg1% %arg2% %arg3% %arg4%
33
Steve Park

.tsで終わるTypeScriptファイルは、node.jsではなく、TypeScriptコンパイラでコンパイルされます。これらは完全に分離されています。TypeScript自体の詳細については、 http://www.typescriptlang.org/ をご覧ください。

Angular2を使用するには、TypeScriptを実際に使用する必要はありません。普通の古いJavascriptを書くことができます。 Angular2チームはフレームワークの作成にTypeScriptを使用していますが。

したがって、最初の質問に答えるために、どちらも関与しません。必要に応じてHTML、CSS、およびJavascriptを作成します。

Bowerの使用に関しては、Angular2は実際にはbower上に存在せず、npmのみが存在します。あなたはこの背後にある議論をここで見ることができます https://github.com/angular/angular/issues/4018 。議論の中で述べているように、本当にbowerを使用したい場合は、GitHubエンドポイントを使用できます。

3
Namirna