Visual Studioやdotnet newで作ることのできるAngularのプロジェクトは、最初からサーバーサイドレンダリングに対応したものが出来るのですが、慣れないうちは仕組みがよくわからなかったりとか、もっとシンプルな状態から理解を進めたいときにはややこしくて邪魔になりますので、その辺を削除してみます。

Views/Home/index.cshtml

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
↓
<app>Loading...</app>

実際はこれだけでサーバーサードレンダリングは行われなくなります。
まずは、main-serverがスタートすることでアプリケーションが始まるようになってるようで、クライアント側の準備が出来たら切り替わるんだと思います。

※これ以降は無理にやらなくてもいいんですが、そのままにしてしまうとなんか変な中途半端感がコードに残ってしまうので・・・

<script src="~/dist/main.js" asp-append-version="true"></script>

あとの作業用に、ここのファイル名も変えておきます。

webpack.config.js

32行目あたりのファイル名を変えます。

entry: { 'main-client': './ClientApp/boot.browser.ts' },
↓
entry: { 'main': './ClientApp/boot.ts' },

50,51行目あたりを書き換えます。

entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
exclude: ['./**/*.server.ts']
↓
entryModule: path.join(__dirname, 'ClientApp/app/app.module#AppModule')

56行目あたりの下記部分をばっさり削除。

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
(中略)
    target: 'node',
    devtool: 'inline-source-map'
});

最後の部分のserverに関する部分を削除。

return [clientBundleConfig, serverBundleConfig];
↓
return [clientBundleConfig];

webpackでサーバーサイド用のビルドをする部分ですね。

webpack.config.vendor.js

74行目あたりの下記部分をばっさり削除。

const serverBundleConfig = merge(sharedConfig, {
    target: 'node',
    resolve: { mainFields: ['main'] },
(中略)
            name: '[name]_[hash]'
        })
    ]
});

最後の部分のserverに関する部分を削除.

return [clientBundleConfig, serverBundleConfig];
↓
return [clientBundleConfig];

これも同様。

ClientAppディレクトリ以下

余計なファイルを削除して、ファイル名の変更等を行います。

削除

  • ClientApp/boot.server.ts
  • ClientApp/app/app.module.server.ts
  • ClientApp/distディレクトリ(もし既に実行していたら)

リネーム

  • ClientApp/boot.browser.ts → ClientApp/boot.ts
  • ClientApp/app/app.module.shared.ts → app.module.ts

ClientApp/app/app.module.ts

リネームしたshared.tsにapp.module.browser.tsの一部のコードをマージします。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

そのあと、app.module.browser.tsは削除します。

ClientApp/app/boot.ts

import { AppModule } from './app/app.module.browser';
↓
import { AppModule } from './app/app.module';

マージしてしまっているので、app.moduleをimportするように修正します。

おわり

これでとりあえずサーバーサイドレンダリングを使っているようなところはあらかた消えてると思います。
削除できるモジュールがあると思うんですが、まだちょっとその辺は試してません。

何でこれやろうと思ったかというと、localStorageを使うようなコードがなんかうまく動かず、サーバーサイドで動いてるからだと気がつくまで結構ハマったからです。実際、作ろうとしているものも規模の小さいシンプルなものなので、ややこしい部分をなくしておきたかったと言うことで。
あと、これ動作するサーバーでnodeが使えないような状況では、サーバーサイドのコードは動かない気もします。

Webアプリケーション関連は、とにかく細かい技の組み合わせが多すぎて、なんか動くようなものを作るのに一苦労です。

Visual Studio 2017(15.2)でXamarinのiOSプロジェクトがビルドできない問題のもうちょっと根本的な解決方法です。

方法

C:\Program Files (x86)\Microsoft Visual Studio\2017(Edition)\MSBuild\Xamarin\Xamarin.Apple.Sdk.targetsを管理者権限のあるエディタで開いて、最後の方にあるPropertyGroupタグの間に、

$(TargetFrameworkRootPath)$(TargetFrameworkIdentifier)\$(TargetFrameworkVersion)

を追加します。

参考

56213 – Cannot build iOS App (Can not resolve reference: C:/Windows/Microsoft.NET/Framework/v4.0.30319/de/mscorlib.resources.dll)

のcomment 24

根本的な解決方法を追加しました。

概要

Visual Studio 2017が更新されバージョンが15.2になりましたが、このバージョンアップを行うと、XamarinのiOSプロジェクトがビルドでエラーになります。

エラーの要点は、

  • mscorlib.dll
  • mscorlib.resources.dll

の参照が解決できないというやつです。

Mac側でビルドする際に対象となるdllの各言語対応のものが送られてないのが原因のようです。

解決方法

エラーをよく確認すると、

C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/ja/mscorlib.dll

とか、参照しに行こうとしているdllのパスがあるはずなので、まずWindows側でそのファイルを探します。そのあと、Mac側で、

/Users/(user name)/Library/Caches/Xamarin/mtbs/builds/(project name)/(uuid)/C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/ja

に、Windowsからファイルをコピーしてやればビルドが通るようになります。
ディレクトリがない場合は作ってからファイルをコピーします。

雑記

WindowsのVisualStudioをバージョンアップする前に、Mac側にVisualStudio for Macをインストールしたり、Xamarin Studioをアンインストールしたりとごちゃごちゃしてたのでそのせいかと思っていろいろ試行錯誤してたんですが、Windows版のXamarinの問題だったようです。

参考

56213 – Cannot build iOS App (Can not resolve reference: C:/Windows/Microsoft.NET/Framework/v4.0.30319/de/mscorlib.resources.dll)

のcomment 12

あるアプリのサーバー側を.NET Coreで作ってAzureにホストしているのですが、.NET Coreのバージョンを1.0から1.1にしてみました。Visual Studioは2015です。

インストール

https://www.microsoft.com/net/download/core

ここで、.NET Core 1.1 SDK – InstallerとVisual Studio 2015 Tools (Preview 2)をダウンロードしてインストール。

ファイルの書き換えとパッケージのアップデート

global.jsonのversionを書き換え。

{
  "projects": [ "src", "test" ],
  "sdk": {
    "version": "1.0.0-preview2-1-003177"
  }
}

project.jsonの下記2カ所。

"Microsoft.NETCore.App": {
  "version": "1.1.0",
  "type": "platform"
},
"frameworks": {
    "netcoreapp1.1": {

Package Manager Consoleで

PM> Update-Package

そうすると、
変更前

{
  "title": "Hoge",
  "version": "1.0.0",
  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.0.1",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
    "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0",
    "Microsoft.Extensions.Configuration.FileExtensions": "1.0.0",
    "Microsoft.Extensions.Configuration.Json": "1.0.0",
    "Microsoft.Extensions.Logging": "1.0.0",
    "Microsoft.Extensions.Logging.Console": "1.0.0",
    "Microsoft.Extensions.Logging.Debug": "1.0.0",
    "Microsoft.Extensions.Options.ConfigurationExtensions": "1.0.0",
    "Microsoft.AspNetCore.Cryptography.KeyDerivation": "1.0.0",
    "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final",
    "Microsoft.AspNetCore.Mvc": "1.0.1",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
    "Microsoft.EntityFrameworkCore": "1.0.1",
    "Microsoft.EntityFrameworkCore.SqlServer": "1.0.1",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0"
  },
  (後略)

{
  "title": "Hoge",
  "version": "1.0.0",
  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.1.0",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
    "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.1.0",
    "Microsoft.Extensions.Configuration.FileExtensions": "1.1.0",
    "Microsoft.Extensions.Configuration.Json": "1.1.0",
    "Microsoft.Extensions.Logging": "1.1.0",
    "Microsoft.Extensions.Logging.Console": "1.1.0",
    "Microsoft.Extensions.Logging.Debug": "1.1.0",
    "Microsoft.Extensions.Options.ConfigurationExtensions": "1.1.0",
    "Microsoft.AspNetCore.Cryptography.KeyDerivation": "1.1.0",
    "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final",
    "Microsoft.AspNetCore.Mvc": "1.1.1",
    "Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
    "Microsoft.EntityFrameworkCore": "1.1.0",
    "Microsoft.EntityFrameworkCore.SqlServer": "1.1.0",
    "Microsoft.AspNetCore.StaticFiles": "1.1.0"
  },
  (後略)

アップデート後は、Microsoft.EntityFrameworkCore.Tools以外は1.1.xになっています。

EntityFramework Core関連

Package Manager Consoleで

PM> Update-Package Microsoft.EntityFrameworkCore.Tools -Pre

これで、

"Microsoft.EntityFrameworkCore.Tools": "1.1.0-preview4-final"

アップデートされます。

Azureへの発行

ちょっとはまってしまったのですが、発行時にTargetFrameworkをちゃんと1.1を選んでおかないと、pubxmlの設定が1.0のままになるらしく、サーバーに発行する段階でエラーが出ます。

deploy.png

Xamarinをちょっと触っているのですが、Macを新しくしたらWindows側のXamarin Mac AgentからMacにログインできなくなりました。

20170113_macagenterror

ネットワークとかMacのSharing設定ではなく、なんかライセンスを承認してないとか言うエラーです。でもMac側では普通にXcodeも使える状態ですので調べてみたら、

Xamarin.iOS 10.0.0.6: Mac Agent can’t connect after update

Solution:

  1. Go to Xcode -> Preferences -> Location
  2. Check if “Command Line Tool” set
  3. Run sudo xcodebuild -license in terminal
  4. Follow instructions

こう言うのがあったので試してみいたら接続できるようになりました。

そういえば、Xcodeをインストールする前にCommandlineToolsを入れたような記憶があるのでそれのせいかもしれません。

« Prev Next »